ＨＴＭＬ簡単講座５時間目

※以下のタグのカッコ＜＞は、タグ変化しないよう全部全角になってます。
毎度毎度お手数お掛けしてすいませんが、使うとき、全部半角に変えてくださいね。

では、そろそろ午後の授業に行きましょう（笑）久々ＵＰの５時間目です。

テーブルの難しさに頭を抱えているでしょうが、テーブルは本当に利用価値のある便利なタグだということがわかれば、「もう使わずにはいられないわっっ（涙目）」と思わずにいられないでしょう（ウソ）４時間目よりさらにややこしくなりますが、前回同様、基本ルールを覚えていれば、大丈夫・・・・・かなぁ・・・（笑）

【基本ルール】
１　タグは必ず＜☆＞＜/☆＞このように＜/＞で閉めること。
２　タグの閉める順番は、タグをつけた順番の逆。＜１＞＜２＞＜３＞＜/３＞＜/２＞＜/１＞
３　タグは必ず半角英数字で書くこと。
４　＜TR＞＜/TR＞は、一つの行、＜TD＞＜/TD＞は、一つの列をあらわすことを覚えておきましょう。

テーブルの応用の続きです。
こたっぺ☆もかなり混乱してきているので、間違ってたらゴメンなさい。（ゴメンじゃ済まないが）
４時間目で使ったテーブルをそのまま使ってみます。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2"＞１＜/TD＞＜/TR＞
＜TR＞＜TD＞２＜/TD＞＜TD＞３＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３

★セルの中の文字のバランスをよくしたい★

また、ちょっと文字が全部左に寄っちゃって、バランス悪いなぁって思ったら、
文字をそれぞれのセルの真ん中に持ってくることもできます。
「真ん中」に持ってくるということはぁ～～～～？

そうです！「center」のタグです。
そして、３時間目の真ん中らへんにあった位置を設定するタグ「Align＝""」を使います。

＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" BGCOLOR="#99ffff" Align="center"＞１＜/TD＞＜/TR＞
＜TR＞＜TD＞２＜/TD＞＜TD＞３＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３

もし、「１」を右に寄せたいときは、

＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" BGCOLOR="#99ffff" Align="right"＞１＜/TD＞＜/TR＞
＜TR＞＜TD＞２＜/TD＞＜TD＞３＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３

１だけでなく、２と３も真ん中寄せにしてみましょう。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" BGCOLOR="#99ffff" Align="center"＞１＜/TD＞＜/TR＞
＜TR＞＜TD Align="center"＞＜font color="red"＞２＜/TD＞＜TD Align="center"＞＜font color="red"＞３＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３

★セルの幅（縦幅）を変えたい★

上のテーブルの１の枠の縦幅を変えてみましょう。
高さを設定するタグは、『height=""』です。
では、高さを７０ピクセルに設定してみます。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" Align="center"　height="70"＞１＜/TD＞＜/TR＞
＜TR＞＜TD Align="center"＞２＜/TD＞＜TD Align="center"＞３＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３

どうですか～？これが７０ピクセルの高さです。

★セルの中の文字に色をつけたい★

では、一番上のセル内の文字に色を付けてみましょう。
もちろん、使うタグは、＜font color="色"＞色を変えたい文字＜/font＞。

セルの「１」という文字を赤にしたい場合。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" Align="center"＞＜font color="red"＞１＜/font＞＜/TD＞＜/TR＞
＜TR＞＜TD Align="center"＞２＜/TD＞＜TD Align="center"＞３＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３

こうします。普通に文字に色を付けるのと同じなので、簡単でしょ？

★セルに字に色をつけたい★

この一つのセルに色をつけることも出来ます。
セルに色をつけたい場合は、その色をつけたい＜TD＞の枠内に色指定をします。
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" Align="center" BGCOLOR="#99ffff"＞＜font color="red"＞１＜/font＞＜/TD＞＜/TR＞
＜TR＞＜TD＞２＜/TD＞＜TD＞３＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３

これを活用すれば、
＜TABLE border="1" width="300"＞
＜TR＞＜TD colSpan="2" Align="center" BGCOLOR="#99ffff"＞＜font color="red"＞１＜/font＞＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" BGCOLOR="#ffff66"＞＜font color="#00cc00"＞２＜/font＞＜/TD＞＜TD Align="center" BGCOLOR="#ffccff"＞＜font color="#3333ff"＞３＜/font＞＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３

こんなキバツなテーブルもできちゃいます（笑）

枠幅なくせば、↓こういったテーブルも出来ます。

＜TABLE border="0" width="300"＞
＜TR＞＜TD colSpan="2" Align="center" BGCOLOR="#99ffff"＞＜font color="red"＞１＜/font＞＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" BGCOLOR="#ffff66"＞＜font color="#00cc00"＞２＜/font＞＜/TD＞＜TD Align="center" BGCOLOR="#ffff66"＞＜font color="#00cc00"＞３＜/font＞＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" BGCOLOR="#ffff66"＞＜font color="#00cc00"＞４＜/font＞＜/TD＞＜TD Align="center" BGCOLOR="#ffff66"＞＜font color="#00cc00"＞５＜/font＞＜/TD＞＜/TR＞
＜TR＞＜TD Align="center" BGCOLOR="#ffff66"＞＜font color="#00cc00"＞６＜/font＞＜/TD＞＜TD Align="center" BGCOLOR="#ffff66"＞＜font color="#00cc00"＞７＜/font＞＜/TD＞＜/TR＞＜/TABLE＞⇒

１
２	３
４	５
６	７

今までのをふまえて、こんなテーブルができますよ。

＜TABLE border="0"（＝枠なし） width="300"＞
＜TR＞＜TD colSpan="2" Align="center"＞＜B＞（＝太字）こたっぺ☆の好き嫌い＜/B＞＜/TD＞＜/TR＞
＜TR＞＜TD height="30" Align="center" width="150"（＝テーブル幅300の半分） BGCOLOR="#ffccff"＞好き＜/TD＞＜TD height="30" Align="center" BGCOLOR="#99ffff"＞嫌い＜/TD＞＜/TR＞
＜TR＞＜TD Align="center"＞ほとんどの動物＜/TD＞＜TD Align="center"＞虫とか＜/TD＞＜/TR＞＜TR＞＜TD Align="center"＞豆腐＜/TD＞＜TD Align="center"＞納豆＜/TD＞＜/TR＞＜TR＞＜TD Align="center"＞映画＜/TD＞＜TD Align="center"＞怖い映画＜/TD＞＜/TR＞＜TR＞＜TD Align="center"＞チキン＜/TD＞＜TD Align="center"＞レバー＜/TD＞＜/TR＞＜/TABLE＞⇒